<template>
  <!-- 智能预采 -->
  <div class="intelligenforecastmining">
    <el-main>
      <el-row :gutter="10">
        <el-col :span="2">
          <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
        </el-col>
        <el-col :span="3">
          <el-cascader placeholder="商品分类" v-model="value" :options="options" @change="handleChange"></el-cascader>
        </el-col>
        <el-col :span="3">
          <el-cascader placeholder="采购员/供应商" v-model="value" :options="options" @change="handleChange"></el-cascader>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col class="topright" :span="12">
          <div>
            <el-link :underline="false" @click="isadvancedfilterfunc()" type="primary">
              <span v-if="isadvancedfilter">收起</span>高级筛选
              <i ref="rotate" class="el-icon-arrow-down"></i>
            </el-link>
          </div>
          <div>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="只显示已勾选商品">只显示已勾选商品</el-checkbox>
            </el-checkbox-group>
          </div>
          <div>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="只显示需采购商品">只显示需采购商品</el-checkbox>
            </el-checkbox-group>
          </div>
          <div>
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="只显示需采购商品">不计算库存</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top: 10px;clear:both" class="clerfix">
        <div style="margin-bottom: 10px;display: flex;justify-content: space-between;">
          <div>
            <el-select v-if="isadvancedfilter" style="margin-right: 10px;" v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-select v-if="isadvancedfilter" v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="text-align: right;">
            <el-button style="margin-right: 10px;">参数配置</el-button>
            <el-button style="margin-right: 10px;" type="primary">生成采购单</el-button>
          </div>
        </div>

        <el-button v-if="isadvancedfilter">重置</el-button>
        <el-button v-if="isadvancedfilter" type="primary">确定</el-button>

      </div>

      <el-row>
        <el-col style="padding-top: 20px;border-top: 1px solid #ddd;" class="left_table" :span="12">
          <el-table v-if="isRouterAlive" :data="tableData" height="600" border style="width: 100%;">
            <el-table-column prop="date" type="selection" width="40">
            </el-table-column>
            <el-table-column prop="name" label="商品名称">

            </el-table-column>
            <el-table-column prop="name" label="单位">
            </el-table-column>
            <el-table-column prop="name" width="100">
              <template slot="header">
                {{purchase}}
                <el-popover placement="bottom" width="160">
                  <div style="text-align: right; margin: 0">
                    <div class="intelligenforecastminingtabletopfontselect" @click="purchasefunc($event)">采购上限</div>
                    <div class="intelligenforecastminingtabletopfontselect" @click="purchasefunc($event)">采购下限</div>
                  </div>
                  <vab-icon slot="reference" icon="filter-line" />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="name">
              <template slot="header">
                {{inventory}}
                <el-popover placement="bottom" width="160">
                  <div style="text-align: right; margin: 0">
                    <div class="intelligenforecastminingtabletopfontselect" @click="inventoryfunc($event)">库存</div>
                    <div class="intelligenforecastminingtabletopfontselect" @click="inventoryfunc($event)">库存差异</div>
                  </div>
                  <vab-icon slot="reference" icon="filter-line" />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="预采购量">
            </el-table-column>
            <el-table-column prop="name" label="分配量">
            </el-table-column>
            <el-table-column prop="address" label="库存均价" width="100">
              <template slot="header">
                {{therecentstock}}
                <el-popover placement="bottom" width="160">
                  <div style="text-align: right; margin: 0">
                    <div class="intelligenforecastminingtabletopfontselect" @click="therecentstockfunc($event)">库存均价
                    </div>
                    <div class="intelligenforecastminingtabletopfontselect" @click="therecentstockfunc($event)">最近进货价
                    </div>
                    <div class="intelligenforecastminingtabletopfontselect" @click="therecentstockfunc($event)">最近入库价
                    </div>
                  </div>
                  <vab-icon slot="reference" icon="filter-line" />
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
              </el-pagination>
        </el-col>
        <el-col style="padding-top: 20px;border-top: 1px solid #ddd;" :offset="1" :span="11">
          <div>
            <vab-icon
              style="color: #1890ff;font-size: 2px;display: inline-block; line-height: 20px; padding-bottom: 2px;margin-right: 10px;"
              icon="checkbox-blank-circle-fill" />采购参考信息
            <div style="display: flex;">
              <div id="tableimgleft" style="height: 230px;width: 50%;" ref="tableimgleft">
              </div>
              <div id="tableimgright" style="height: 230px;width: 50%;" ref="tableimgleft">
              </div>
            </div>
          </div>
          <vab-icon
            style="color: #1890ff;font-size: 2px;display: inline-block; line-height: 20px; padding-bottom: 2px;margin-right: 10px;"
            icon="checkbox-blank-circle-fill" />采购量分配
          <el-table :data="amountpurchasedtable" height="286" border style="width: 100%">
            <el-table-column label="采购模式">
              <template slot-scope="scope">
                <el-select v-model="amountpurchasedtable[scope.$index].pattern" placeholder="请选择">
                  <el-option v-for="item in amountpurchasedtable[scope.$index].patternAll" :key="item" :label="item"
                    :value="item">
                  </el-option>
                </el-select>
              </template>


            </el-table-column>
            <el-table-column label="采购员/供应商" width="120">
              <template slot-scope="scope">
                <el-select v-model="amountpurchasedtable[scope.$index].personneltype" placeholder="请选择采购">
                  <el-option v-for="(item,i) in amountpurchasedtable[scope.$index].personneltypeAll" :key="i"
                    :label="item" :value="item">
                  </el-option>
                </el-select>
              </template>
              <!-- <el-input v-model="input" placeholder="请输入内容"></el-input> -->
            </el-table-column>
            <el-table-column label="预采购量">
              <template slot-scope="scope">
                <el-input v-model.number="amountpurchasedtable[scope.$index].purchasenumber"></el-input>
              </template>
            </el-table-column>
            <el-table-column :label="therecentstock">
              <template slot-scope>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <vab-icon @click="addamountpurchasedtable" style="font-size: 20px;color: #1890ff;" icon="add-fill" />
                <vab-icon v-if="amountpurchasedtable.length !== 1" @click="subamountpurchasedtable(scope.$index)"
                  style="padding-left: 5px;font-size: 20px;color: #ff0000;" icon="subtract-fill" />
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px;">
            <el-button>取消</el-button>
            <el-button type="primary">保存</el-button>
          </div>
        </el-col>
      </el-row>

    </el-main>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    methods: {
      therecentstockfunc(value) {
        this.therecentstock = value.target.innerHTML
        document.body.click()
        this.reload()
      },
      inventoryfunc(value) {
        this.inventory = value.target.innerHTML
        document.body.click()
        this.reload()
      },
      reload() {
        this.isRouterAlive = false
        this.$nextTick(() => this.isRouterAlive = true)
      },
      purchasefunc(value) {
        this.purchase = value.target.innerHTML
        document.body.click()
        this.reload()
      },
      handleChange() {
        alert("发生了改变")
      },
      isadvancedfilterfunc() {
        if (this.isadvancedfilter) {
          this.$refs.rotate.style.transform = 'rotate(0deg)'
          this.isadvancedfilter = false
        } else {
          this.$refs.rotate.style.transform = 'rotate(180deg)'
          this.isadvancedfilter = true
        }
      },
      addamountpurchasedtable() {
        // 获取表格长度
        let amountpurchasedtablelength = this.amountpurchasedtable.length
        if (amountpurchasedtablelength < 5) {
          // 通过长度获取id,达到自增目的
          let newid = this.amountpurchasedtable[amountpurchasedtablelength - 1].id + 1
          let newjson = {
            id: newid,
            patternAll: ["市场自采", "供应商直供"],
            pattern: "市场自采",
            personneltypeAll: ["张三", "李四", "王五"],
            personneltype: '',
            purchasenumber: 0,
          }
          this.amountpurchasedtable.push(newjson)
        } else {
          this.$message({
            showClose: true,
            message: '最多只能分配五条',
            type: 'error'
          });
        }

      },
      subamountpurchasedtable(index) {
        this.amountpurchasedtable.splice(index, 1)
      }
    },
    mounted() {
      // .dispose()//图片销毁
      echarts.init(document.getElementById('tableimgleft')).setOption(this.option)
      echarts.init(document.getElementById('tableimgright')).setOption(this.option)
    },
    data() {
      return {
        amountpurchasedtable: [{
          id: 1,
          patternAll: ["市场自采", "供应商直供"],
          pattern: "市场自采",
          personneltypeAll: ["张三", "李四", "王五"],
          personneltype: '',
          purchasenumber: 0,
        }], //采购量分配
        therecentstock: "库存均价",
        inventory: "库存",
        isRouterAlive: true,
        purchase: '采购上限',
        input3: '',
        checkList: [],
        isvisible: false,
        isadvancedfilter: false,
        option: {
          title: {
            text: "测试",
            textStyle: {
              fontSize: 14, //字体大小
            },
          },
          xAxis: {
            type: 'category',
            data: ['', '', '', '', '', '']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [0, 0, 0, 0, 0, 0, 0],
            type: 'line'
          }]
        },
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }],
        }],
        value: ["默认库房"]
      }
    }
  }
</script>

<style>
  .intelligenforecastmining .el-input input {
    padding: 0 !important;
    padding-left: 5px !important;
  }

  .intelligenforecastmining .topright {
    display: flex;
  }

  .intelligenforecastmining .topright div:first-child {
    margin-top: 7px;
  }

  .intelligenforecastmining .topright div {
    flex: 1;
  }

  .intelligenforecastminingtabletopfontselect:hover {
    background-color: rgba(219, 220, 221, 0.3);
  }

  .intelligenforecastminingtabletopfontselect {
    text-align: center;
    cursor: default;
    line-height: 34px;
  }
</style>
